@extends('layout.adminlayout')
@section('css')
<script src="/admin/js/metisMenu.min.js"></script>
<script src="/admin/js/custom.js"></script>
<link href="/admin/css/area_info.css" rel="stylesheet">
<link href="/admin/css/custom.css" rel="stylesheet">
<link href="/admin/css/add_manage.css" rel="stylesheet">
<link href="/admin/css/select_building.css" rel="stylesheet">
<style>
	#dv{position: absolute;float: left;margin-left: 237px;margin-top: -15px;background-color:White;z-index:9999;display: none;}
	#dv2{max-height:216px;overflow-y:auto;margin-left: 15px;border: 1px solid #A9A9A9;width: 348.3px;}
	#eui{font-size: 16px;cursor: pointer;}
    .st_this{font-size: 16px;line-height: 36px;cursor: pointer;}
	.a{background-color: #A9A9A9;}
	.b{background-color: #787BCA;}
	.euiyz{color: red;float: left;margin-top: 6px;/*display: none;*/}
</style>
@endsection
@section('content')
<div class="forms">
	<div class=" form-grids row form-grids-right">
		<div class="widget-shadow " data-example-id="basic-forms"> 
			<div class="form-title">
				<h4>添加设备 :</h4>
			</div>
			<div class="form-body">
				<form class="form-horizontal">
					{{csrf_field()}}
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">
							DevEUI:
						</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" name="eui" id="eui" placeholder="请填写DevEUI的后四位" autocomplete="off" readonly>
							{{--<input type="text" id="st" placeholder="请选择" readonly>--}}
							<input type="text" name="notautosubmit" style="display:none"/>
						</div>
						<div class="euiyz"></div>
					</div>
					<div class="form-group" id="dv">
						<label for="inputPassword3" class="col-sm-2 control-label">
						</label>
						<div class="col-sm-3" id="dv2">
							<dl>
								@foreach($device as $v)
								<dd class="st_this">{{$v['DevEUI']}}</dd>
								@endforeach
							</dl>
						</div>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">
							区域 :
						</label>
						<li class="area_info">
							<div class="col-sm-3">
								<select name="area" id="area" class="form-control1">
									<option value="0">请选择区域</option>
									@if($area != null)
										@foreach($area as $v)
											<option value="{{$v['a_id']}}">{{$v['a_name']}}</option>
										@endforeach
									@endif
								</select>
							</div>
						</li>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">
							建筑 :
						</label>
						<li class="area_info">
							<div class="col-sm-3">
								<input type="text" name="buildings" class="form-control" value="" placeholder="请选择">
								<input type="hidden" name="building" class="form-control" value="" placeholder="请选择">
								<dl class="col-sm-6 dv4" id="building">
								</dl>
							</div>
						</li>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">
							房间 :
						</label>
						<li class="area_info">
							<div class="col-sm-3">
								<select name="room" id="rooms" class="form-control1">
									<option value="0">请选择房间</option>
								</select>
							</div>
						</li>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">
							具体位置 :
						</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" name="loc" placeholder="具体位置" id="loc">
						</div>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">
							所属类型 :
						</label>
						<li class="area_info">
							<div class="col-sm-3">
								<select name="type" id="type" class="form-control1">
									<option value="0">请选择设备类型</option>
									@if($type != null)
										@foreach($type as $val)
											<option value="{{$val['id']}}">{{$val['type']}}</option>
										@endforeach
									@endif
								</select>
							</div>
						</li>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">
							设备型号 :
						</label>
						<li class="area_info">
							<div class="col-sm-3">
								<select name="model" id="model" class="form-control1">
									<option value="0">请选择设备型号</option>
								</select>
							</div>
						</li>
					</div>
					<div class="col-sm-offset-2">
						<button type="button" class="btn btn-default" id="sub" style="margin-left: 0.33rem;">提交</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script>
    //当点击eui时,dv卷出
    $('#eui').click(function () {
        var display = $('#dv').css('display')
        if(display == 'none'){
            $('#dv').slideDown();
            $('#eui').attr('readonly',false);
        }else{
            $('#dv').slideUp();
            $('#eui').attr('readonly',true);
        }
    });
    //鼠标移入移出
    $('.st_this').mouseover(function () {
        $(this).addClass('a');
    });
    $('.st_this').mouseout(function () {
        $(this).removeClass('a');
    });
    //点击修改样式
    $('.st_this').click(function () {
        var select = $(this).html();
        $('#eui').val(select);
        $('.st_this').removeClass('b');
        $(this).addClass('b');
        $('#dv').slideUp();
    });
    //输入匹配
    $('#eui').keyup(function () {
        $('.st_this').attr('hidden',true);
        var val = $('#eui').val();
        var preg = new RegExp(val + "$","gim");
        $('.st_this').each(function () {
            var res = $(this).html();
            if(preg.test(res)){
                $(this).attr('hidden',false);
            }
            preg.test(res);
        })
    })
	//判断eui是否已被绑定
	$('#area').click(function () {
		var eui = $('#eui').val();
		if(eui != ''){
		    $.ajax({
				type:'post',
				url:'/admin/device/check',
                async:false,
				data:{
                    "_token": $("input[name=_token]").val(),
                    'eui':eui,
                },
				dataType:'json',
				success:function (data) {
					if(data.status == '-1'){
					    $('.euiyz').html(data.msg);
					}
                }
			})
		}else{
            $('.euiyz').html('eui不能为空');
		}
    })
	//得到焦点时清空提示
	$('#eui').focus(function () {
        $('.euiyz').html('');
    })
	//区域建筑联动
	$('#area').change(function () {
		var areaId = $('#area').val()
		$.ajax({
			type:'post',
			url:'/admin/room/getbuild',
            async:false,
            data:{
                "_token": $("input[name=_token]").val(),
                'areaId':areaId,
            },
            dataType:'json',
            success:function (data) {
                var str = '<option class="dstyle" value="">请选择建筑</option>';
                for(var i=0;i<data.length;i++){
                    str += '<option class="dstyle" value="'+data[i]['b_id']+'">'+data[i]['b_name']+'</option>';
				}
                $('#building').empty();
                $('#building').append(str);
            }
		})
    })

	//建筑房间联动
    // $('#building').change(function () {
    $('#rooms').focus(function () {
        var buildingId = $('input[name=building]').val();
        $.ajax({
            type:'post',
            url:'/admin/room/getroom',
            async:false,
            data:{
                "_token": $("input[name=_token]").val(),
                'buildingId':buildingId,
            },
            dataType:'json',
            success:function (data) {
                var option = '<option value="0">请选择房间</option>';
                for(var i=0;i<data.length;i++){
                    console.log(data[i]['r_id']);
                    option += '<option value="'+data[i]['r_id']+'">'+data[i]['r_name']+'</option>';
                }
                $('#rooms').empty();
                $('#rooms').append(option);
            }
        });
    });

	//类型与型号联动
    $('#type').change(function () {
        var typeId = $('#type').val();
        $.ajax({
            type:'post',
            url:'/admin/device/getmodel',
            async:false,
            data:{
                "_token": $("input[name=_token]").val(),
                'typeId':typeId,
            },
            dataType:'json',
            success:function (data) {
                var option = '<option value="0">请选择型号</option>';
                for(var i=0;i<data.length;i++){
                    console.log(data[i]['tp_id']);
                    option += '<option value="'+data[i]['tp_id']+'">'+data[i]['t_model']+'</option>';
                }
                $('#model').empty();
                $('#model').append(option);
            }
        });
    });
    //提交表单
    $('#sub').click(function () {
        var eui = $('#eui').val();
        var area = $('#area').val();
        var building = $('input[name=building]').val();
        var rooms = $('#rooms').val();
        var loc = $('#loc').val();
        var type = $('#type').val();
        var model = $('#model').val();
        /*alert(eui);
        alert(building);
        return false;*/
        if(eui != '' && area != 0 && building !=0 && rooms != 0 && loc != '' && type != 0 && model != 0){
            $.ajax({
                type:'post',
                url:'/admin/device/create',
                async:false,
                data:{
                    "_token": $("input[name=_token]").val(),
					'eui':eui,
                    'area':area,
					'building':building,
					'rooms':rooms,
					'loc':loc,
					'type':type,
                    'model':model
                },
                dataType:'json',
                success:function (data) {
                    alert(data.msg);
                    if(data.status == '1' || data.status == '-3'){
                        location.href = '/admin/device/index';
                    }
                    return false;
                }
            })
        }else{
            alert('请将信息填写完整')
            return false;
        }
    });
</script>
@endsection
@section('lastjs')
<script src="/admin/js/add_manage.js"></script>
<script src="/admin/js/select_building.js"></script>
@endsection